<template>
  <div id="Physical">
    <van-nav-bar fixed left-arrow left-text="返回" placeholder title="身体症状" @click-left="back"/>
    <div class="main">
      <div v-show="active === 0" class="header">
        <div class="xinqing">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/xq.png"/><span class="title"
          >心情</span
          >
          </div>
          <div id="xinqing" @click="xinqing($event)">
            <span v-for="item in numList" id="dengji" :key="item">
              {{ item }}
            </span>
          </div>
          <div class="detail">
            <span class="low">没有痛苦</span>
            <span class="nice">极度痛苦</span>
          </div>
        </div>
        <div class="shiyu">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/shiyu.png"/><span class="title"
          >食欲</span
          >
          </div>
          <div id="shiyu" @click="shiyu($event)">
            <span v-for="item in numList" id="dengji" :key="item">
              {{ item }}
            </span>
          </div>
          <div class="detail">
            <span class="low">无食欲</span>
            <span class="nice">食欲良好</span>
          </div>
        </div>
         <div class="shuimian">
          <div class="tit">
            <img alt="" src="@/assets/images/sm.png"/><span class="title"
          >睡眠</span
          >
          </div>
          <div class="main">
            <div class="tit"><span class="title"
            >睡眠时长</span
            >
            </div>
              <div id="smian" @click="shuimina($event)">
                <span v-for="item in ['小于5小时','5—8小时','大于8小时']" id="shuimian" :key="item">
                  {{ item }}
                </span>
              </div>
          </div>
        </div>
      </div>
      <div v-show="active === 1" class="paibian">
        <div class="pb">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/pb.png"/>
            <span class="title">排便</span>
          </div>
          <div class="mian">
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="是否排便"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="form.zz_shifoupaibian"
                    direction="horizontal"
                  >
                    <van-radio :name="1">是</van-radio>
                    <van-radio :name="0">否</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
            <van-row
              v-show="form.zz_shifoupaibian == 1"
              align="center"
              justify="space-between"
              type="flex"
            >
              <van-col class="title" span="6">大便次数</van-col>
              <van-col class="title" span="8">
                <van-form :show-error-message="false">
                  <van-field
                    v-model="form.zz_dabiancishu"
                    placeholder="请输入"
                  />
                </van-form
                >
              </van-col>
              <van-col span="2"><span>次</span></van-col>
            </van-row>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="大便干燥"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="form.zz_shifouganzao"
                    direction="horizontal"
                  >
                    <van-radio :name="1">是</van-radio>
                    <van-radio :name="0">否</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="是否腹泻"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="form.zz_shifoufuxie"
                    direction="horizontal"
                  >
                    <van-radio :name="1">是</van-radio>
                    <van-radio :name="0">否</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
            <div class="xiaobian">
              <div class="tit"><span class="title"
              >小便</span
              >
              </div>
              <div id="xbian" @click="xiaobian($event)">
                <span v-for="item in ['<100ml 无尿','≤400ml 少尿','1000-2000ml 正常','>2000ml 多尿']" id="xiaobian" :key="item">
                  {{ item }}
                </span>
              </div>
            </div>
            <!-- <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="小便"
                name="radio"
              >
                <template #input>
                  <select v-model="form.zz_xiaobian">
                    <option value="<100ml 无尿"><100ml 无尿</option>
                    <option value="≤400ml 少尿">≤400ml 少尿</option>
                    <option value="1000-2000ml 正常">1000-2000ml 正常</option>
                    <option value=">2000ml 多尿">>2000ml 多尿</option>
                  </select>
                </template>
              </van-field>
            </van-row> -->
          </div>
        </div>
      </div>
      <div v-show="active === 2" class="zhengzhuang">
        <div class="zz">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/qsxzz.png"/>
            <span class="title">全身性症状</span>
          </div>
          <div class="mian">
            <div class="xm">
              <span class="title"
              >胸闷</span
              >
              <div id="xiongmen" @click="xm($event)">
                <span v-for="item in numList" id="xm" :key="item">
                  {{ item }}
                </span>
              </div>
            </div>
            <div class="xh">
              <span class="title"
              >心慌</span
              >
              <div id="xinhuang" @click="xh($event)">
                <span v-for="item in numList" id="xh" :key="item">
                  {{ item }}
                </span>
              </div>
            </div>
            <div class="teto">
              <span class="title"
              >疼痛</span
              >
              <div id="tengtong" @click="tt($event)">
                <span v-for="item in numList" id="teto" :key="item">
                  {{ item }}
                </span>
              </div>
            </div>
            <div class="fr">
              <span class="title"
              >发热</span
              >
              <div id="fare" @click="fr($event)">
                <span v-for="item in numList" id="fr" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">正常</span>
                <span class="nice">39℃以上</span>
              </div>
            </div>
            <div class="sz">
              <span class="title"
              >水肿</span
              >
              <div id="shuizhong" @click="sz($event)">
                <span v-for="item in numList" id="sz" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">正常</span>
                <span class="nice">发泡，流水</span>
              </div>
            </div>
            <div class="fl">
              <img alt="" src="@/assets/images/journal/fl.png"/><span class="title"
            >乏力</span
            >
              <div id="fali" @click="fl($event)">
                <span v-for="item in numList" id="fl" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">没有乏力</span>
                <span class="nice">极度乏力</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="active === 3" class="huxi">
        <div class="hx">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/hxxtzz.png"/>
            <span class="title">呼吸系统症状</span>
          </div>
          <div class="mian">
            <div class="hxkn">
              <img alt="" src="@/assets/images/journal/hxkn.png"/><span class="title"
            >呼吸困难</span
            >
              <div id="huxi" @click="hx($event)">
                <span v-for="item in numList" id="hxkn" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无呼吸困难</span>
                <span class="nice">极度呼吸困难</span>
              </div>
            </div>
            <div class="kskt">
              <img alt="" src="@/assets/images/journal/hxkn.png"/><span class="title"
            >咳嗽/咳痰</span
            >
              <div id="kesouketan" @click="kskt($event)">
                <span v-for="item in numList" id="kskt" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无咳嗽</span>
                <span class="nice">重度</span>
              </div>
            </div>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="咳血"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="form.zz_kexue"
                    direction="horizontal"
                  >
                    <van-radio name="1">有，立刻就医</van-radio>
                    <van-radio name="0">无</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="声音嘶哑"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="form.zz_shengyinsiya"
                    direction="horizontal"
                  >
                    <van-radio :name="1">是</van-radio>
                    <van-radio :name="0">无</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
          </div>
        </div>
      </div>
      <div v-show="active === 4" class="xhxt">
        <div class="xh">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/xhxtzz.png"/>
            <span class="title">消化系统症状</span>
          </div>
          <div class="mian">
            <div class="kg">
              <img alt="" src="@/assets/images/journal/kg.png"/><span class="title"
            >口干</span
            >

              <div id="kougan" @click="kg($event)">
                <span v-for="item in numList" id="kg" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无口干</span>
                <span class="nice">极度口干</span>
              </div>
            </div>
            <div class="ex">
              <img alt="" src="@/assets/images/journal/ex.png"/><span class="title"
            >恶心</span
            >
              <div id="exin" @click="ex($event)">
                <span v-for="item in numList" id="ex" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无恶心</span>
                <span class="nice">恶心难以忍受</span>
              </div>
            </div>
            <div class="fz">
              <span class="title"
              >腹胀</span
              >
              <div id="fuzhang" @click="fz($event)">
                <span v-for="item in numList" id="fz" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无症状</span>
                <span class="nice">极度不适</span>
              </div>
            </div>
            <div class="fx">
              <span class="title"
              >腹泻</span
              >
              <div id="fuxie" @click="fx($event)">
                <span v-for="item in numList" id="fx" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">大便&lt;4</span>
                <span class="nice">危及生命</span>
              </div>
            </div>
            <div class="bm">
              <span class="title"
              >便秘</span
              >
              <div id="bianmi" @click="bm($event)">
                <span v-for="item in numList" id="bm" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">正常排便</span>
                <span class="nice">不排便</span>
              </div>
            </div>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="呕血/便血"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="form.zz_xh_ouxue"
                    direction="horizontal"
                  >
                    <van-radio name="1">有，立刻就医</van-radio>
                    <van-radio name="0">无</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
            <van-row align="center" class="fanliu" justify="space-between" type="flex">
              <van-col class="fliu">
                <div>反流</div>
                <div class="info">
                  反流常指在无恶心、干呕和不用力的情况下，胃内容物反流入口腔或咽部。
                </div>
              </van-col>
              <van-radio-group
                v-model="form.zz_fanliu"
                direction="horizontal"
              >
                <van-radio :name="1">是</van-radio>
                <van-radio :name="0">否</van-radio>
              </van-radio-group>
              <!--              <van-field-->
              <!--                class="title"-->
              <!--                input-align="right"-->
              <!--                label="反流"-->
              <!--                name="radio"-->
              <!--              >-->
              <!--                <template #input>-->
              <!--                 -->
              <!--                </template>-->
              <!--              </van-field>-->
            </van-row>
          </div>
        </div>
      </div>
      <div v-show="active === 5" class="xhxt">
        <div class="xh">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/jsxlzz.png"/>
            <span class="title">精神心理症状</span>
          </div>
          <div class="mian">
            <div class="jl">
              <img alt="" src="@/assets/images/journal/jl.png"/><span class="title"
            >焦虑</span
            >
              <div id="jiaolv" @click="jl($event)">
                <span v-for="item in numList" id="jl" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无焦虑</span>
                <span class="nice">极度焦虑</span>
              </div>
            </div>
            <div class="yy">
              <img alt="" src="@/assets/images/journal/yy.png"/><span class="title"
            >抑郁</span
            >

              <div id="yiyu" @click="yy($event)">
                <span v-for="item in numList" id="yy" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无抑郁</span>
                <span class="nice">极度抑郁</span>
              </div>
            </div>
            <div class="zw">
              <img alt="" src="@/assets/images/journal/zw.png"/><span class="title"
            >谵妄</span
            >

              <div id="zhanwang" @click="zw($event)">
                <span v-for="item in numList" id="zw" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无谵妄</span>
                <span class="nice">极度谵妄</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="active === 6" class="qita">
        <div class="qt">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/qt.png"/>
            <span class="title">其他情况</span>
          </div>
          <div class="mian">
            <van-field
              v-model="form.zz_content"
              autosize
              placeholder="请输入留言"
              rows="5"
              type="textarea"
            />

            <div class="meiti">
              <van-uploader
                v-model="fileList1"
                :after-read="huodongMedia"
                :before-delete="deleteImg"
                :before-read="beforeRead"
              >
                <van-button :disabled="disabled" round size="mini" type="info">{{ btnText }}</van-button>
              </van-uploader>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-steps :active="active" active-icon="circle">
      <van-step>
        1
        <p v-if="this.active == 0" class="percentage">12.5%</p>
      </van-step>
      <van-step>
        2
        <p v-if="this.active == 1" class="percentage">25%</p>
      </van-step>
      <van-step>
        3
        <p v-if="this.active == 2" class="percentage">37.5%</p>
      </van-step>
      <van-step>
        4
        <p v-if="this.active == 3" class="percentage">50%</p>
      </van-step>
      <van-step>
        5
        <p v-if="this.active == 4" class="percentage">62.5%</p>
      </van-step>
      <van-step>
        6
        <p v-if="this.active == 5" class="percentage">75%</p>
      </van-step>
      <van-step>
        7
        <p v-if="this.active == 6" class="percentage">87.5%</p>
      </van-step>
      <van-step>8</van-step>
    </van-steps>
    <div class="submit">
      <van-button v-show="active!==0" round type="default" @click="upStep">上一步</van-button>
      <van-button v-show="active!==6" round type="info" @click="DownStep">下一步</van-button>
      <van-button v-show="active===6" round type="info" @click="save">保存并提交</van-button>
    </div>
  </div>
</template>

<script>
import {upFiles} from "@/apis/journal";
import {addHealthLog} from "@/apis/journal";
import apiConfig from "../../../config/api.config";
// 图片压缩
import {uploadImgs} from "../../../config/upload"

export default {
  data() {
    return {
      apiConfig,
      uploadImgs,
      disabled: false,
      active: 0,
      btnText: "上传图片",
      numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      num2List: [0, 1, 2, 3, 4],
      fileList1: [],
      form: {
        action: "add",
        part: 3,
        zz_xinqing: 0,
        zz_shiyu: 0,
        zz_shuimianshichang: "小于5小时",
        zz_shifoupaibian: 0,
        zz_dabiancishu: "",
        zz_shifouganzao: 0,
        zz_shifoufuxie: 0,
        zz_xiaobian: "<100ml 无尿",
        zz_shifouxiongmen: 0,
        zz_xiongmencishu: 0,
        zz_shifouxinhuang: 0,
        zz_shifououtu: 0,
        zz_outucishu: 0,
        zz_shifoufuzhang: 0,
        zz_shifouexin: 0,
        zz_shifoutengtong: 0,
        zz_tengtongdengji: 0,
        zz_content: "",
        zz_yuyin: "",
        zz_img: [],
        zz_fare: 0,
        zz_shuizhong: 0,
        zz_fali: 0,
        zz_huxikunnan: 0,
        zz_kesou: 0,
        zz_kexue: 0,
        zz_xh_kougan: 0,
        zz_xh_outu: 0,
        zz_xh_yanshi: 0,
        zz_xh_fuzhang: 0,
        zz_xh_fuxie: 0,
        zz_xh_bianmi: 0,
        zz_xh_ouxue: 0,
        zz_js_jiaolv: 0,
        zz_js_yiyu: 0,
        zz_js_zhanwang: 0,
        zz_shengyinsiya: 0,
        zz_fanliu: 0
      }
    };
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    xinqing(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#xinqing");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xinqing = el.target.innerText;
      }
    },
    xm(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#xiongmen");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xiongmencishu = el.target.innerText;
      }
    },
    kskt(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#kesouketan");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_kesou = el.target.innerText;
      }
    },
    fz(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#fuzhang");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xh_fuzhang = el.target.innerText;
      }
    },
    fx(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#fuxie");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");

        this.form.zz_xh_fuxie = el.target.innerText;
      }
    },
    bm(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#bianmi");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xh_bianmi = el.target.innerText;
      }
    },
    fr(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#fare");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_fare = el.target.innerText;
      }
    },
    xh(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#xinhuang");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_shifouxinhuang = el.target.innerText=='是'?1:0;
      }
    },
    tt(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#tengtong");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");

        this.form.zz_tengtongdengji = el.target.innerText;
      }
    },
    sz(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#shuizhong");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_shuizhong = el.target.innerText;
      }
    },
    fl(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#fali");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_fali = el.target.innerText;
      }
    },
    hx(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#huxi");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_huxikunnan = el.target.innerText;
      }
    },
    kg(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#kougan");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xh_kougan = el.target.innerText;
      }
    },
    ys(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#yanshi");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xh_yanshi = el.target.innerText;
      }
    },
    ex(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#exin");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xh_outu = el.target.innerText;
      }
    },
    yy(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#yiyu");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_js_yiyu = el.target.innerText;
      }
    },
    jl(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#jiaolv");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_js_jiaolv = el.target.innerText;
      }
    },
    zw(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#zhanwang");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_js_zhanwang = el.target.innerText;
      }
    },
    beforeRead(file) {
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/jpg" &&
        file.type !== "image/gif" &&
        file.type !== "image/png"
      ) {
        this.$toast("请上传 .jpg，.png，.gif 格式图片");
        return false;
      }
      return true;
    },
    shiyu(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#shiyu");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_shiyu = el.target.innerText;
      }
    },
    shuimina(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#smian");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_shuimianshichang = el.target.innerText;
      }
    },
    xiaobian(el) {
      if (el.target.localName !== "div") {
        let doc = document.querySelector("#xbian");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.form.zz_xiaobian = el.target.innerText;
        console.log(this.form.zz_xiaobian)
      }
    },
    shangchuanyuyin(file) {
      upFiles(file)
        .then(res => {
          let arr = res.data;
          arr.forEach(item => {
            this.form.zz_yuyin = item;
          });
        })
        .catch(err => {
          if (err.msg) {
            this.$toast(err.msg);
          } else {
            this.$toast('网络错误');
          }
        });
    },
    // 图片上传
    huodongMedia(file) {

      file.status = 'uploading';
      file.message = '上传中...';
      this.uploadImgs(file)
      setTimeout(() => {
        if (sessionStorage.getItem('base64') != '' && sessionStorage.getItem('base64') != null) {
          upFiles({file: sessionStorage.getItem('base64')})
            .then(res => {
              if (res.codes == "200") {
                this.form.zz_img.push(res.data);
                file.status = '';
                file.message = '';
                this.disabled = false
              } else {
                file.status = 'failed';
                file.message = '上传失败';
                this.disabled = false
              }
            })
            .catch(err => {
              this.disabled = false
              file.status = 'failed';
              file.message = '上传失败';
              this.$toast("上传失败");

            });
          sessionStorage.removeItem('base64')
        } else {
          file.status = 'failed';
          file.message = '上传失败';
          this.$toast("上传失败");
        }
      }, 1600)

      // upFiles(file)
      //   .then(res => {
      //     file.status = '';
      //     file.message = '';
      //     if (res.codes == "200") {
      //       let arr = res.data;
      //       arr.forEach(item => {
      //         this.form.zz_img.push(item);
      //       });
      //     } else {
      //       file.status = 'failed';
      //       file.message = '上传失败';
      //     }
      //   })
      //   .catch(err => {

      //     file.status = 'failed';
      //     file.message = '上传失败';
      //     this.$toast(err.msg);
      //   });

    },
    save() {
      console.log(JSON.stringify(this.form))
      this.form.action = "add";
      // 复康日志版本
      this.form.yemian = apiConfig.journal
      // this.form.zz_shifouxiongmen = this.form.zz_shifouxiongmen ? 1 : 0;
      // this.form.zz_shifouxinhuang = this.form.zz_shifouxinhuang ? 1 : 0;
      // this.form.zz_shifououtu = this.form.zz_shifououtu ? 1 : 0;
      // this.form.zz_shifoufuzhang = this.form.zz_shifoufuzhang ? 1 : 0;
      // this.form.zz_shifouexin = this.form.zz_shifouexin ? 1 : 0;
      // this.form.zz_shifoutengtong = this.form.zz_shifoutengtong ? 1 : 0;
      addHealthLog(this.form)
        .then(res => {
          this.$toast("添加成功");
          this.$router.go(-1);
          // this.form.id = res.data.id;
          let expire = new Date(
            new Date().setDate(new Date().getDate() + 1)
          ).setHours(0, 0, 0, 0);
          this.localStorageSet("physical", this.form, expire);
          this.localStorageSet("id", res.data.id, expire);
        })
        .catch(err => {
          if (err.msg) {
            this.$toast(err.msg);
          } else {
            this.$toast('网络错误');
          }
        });
    },
    phylist() {
      this.form.hzid = this.$route.params.hzid
      this.form.action = "list"
      addHealthLog(this.form)
        .then(res => {
          const data = res.data.list
          for (const i in data) {
            for (const it in this.form) {
              if (i === it) {
                this.form[it] = data[i]
              }
            }
          }
          // 图片不为空
          if (this.form.zz_img.length) {
              this.form.zz_img.forEach(item => {
              item = apiConfig.imgUrl + item;
              this.fileList1.push({url: item})
            })
          }
          // 心情
          if (this.form.zz_xinqing == null||this.form.zz_xinqing=="-1") {
            this.form.zz_xinqing = 0
            const xinqing = document.getElementById("xinqing");
            xinqing.children[Number(this.form.zz_xinqing)].className = "active";
          } else {
            const xinqing = document.getElementById("xinqing");
            xinqing.children[Number(this.form.zz_xinqing)].className = "active";
          }
          // 食欲
          if (this.form.zz_shiyu == null||this.form.zz_shiyu=="-1") {
            this.form.zz_shiyu = 0
            const shiyu = document.getElementById("shiyu");
            shiyu.children[Number(this.form.zz_shiyu)].className = "active";
          } else {
            const shiyu = document.getElementById("shiyu");
            shiyu.children[Number(this.form.zz_shiyu)].className = "active";
          }
          // 乏力
          if (this.form.zz_fali == null||this.form.zz_fali=="-1") {
            this.form.zz_fali = 0
            const fali = document.getElementById("fali");
            fali.children[Number(this.form.zz_fali)].className = "active";
          } else {
            const fali = document.getElementById("fali");
            fali.children[Number(this.form.zz_fali)].className = "active";
          }

          // 呼吸困难
          if (this.form.zz_huxikunnan == null||this.form.zz_huxikunnan=="-1") {
            this.form.zz_huxikunnan = 0
            const huxikunnan = document.getElementById("huxi");
            huxikunnan.children[Number(this.form.zz_huxikunnan)].className = "active";
          } else {

            const huxikunnan = document.getElementById("huxi");
            huxikunnan.children[Number(this.form.zz_huxikunnan)].className = "active";
          }
          // 口干
          if (this.form.zz_xh_kougan == null||this.form.zz_xh_kougan=="-1") {
            this.form.zz_xh_kougan = 0
            const zz_xh_kougan = document.getElementById("kougan");
            zz_xh_kougan.children[Number(this.form.zz_xh_kougan)].className = "active";
          } else {
            const zz_xh_kougan = document.getElementById("kougan");
            zz_xh_kougan.children[Number(this.form.zz_xh_kougan)].className = "active";
          }
          // 呕吐
          if (this.form.zz_xh_outu == null||this.form.zz_xh_outu=="-1") {
            this.form.zz_xh_outu = 0
            const zz_xh_outu = document.getElementById("exin");
            zz_xh_outu.children[Number(this.form.zz_xh_outu)].className = "active";
          } else {
            const zz_xh_outu = document.getElementById("exin");
            zz_xh_outu.children[Number(this.form.zz_xh_outu)].className = "active";
          }
          // 厌食
          // if (this.form.zz_xh_yanshi=="" || this.form.zz_xh_yanshi == 0) {
          //    if(this.form.zz_xh_yanshi === "") {
          //     this.form.zz_xh_yanshi = 0
          //   }
          //   const zz_xh_yanshi = document.getElementById("yanshi");
          //   zz_xh_yanshi.children[Number(this.form.zz_xh_yanshi)].className = "active";
          // }
          // 抑郁
          if (this.form.zz_js_yiyu == null||this.form.zz_js_yiyu=="-1") {
            this.form.zz_js_yiyu = 0
            const zz_js_yiyu = document.getElementById("yiyu");
            zz_js_yiyu.children[Number(this.form.zz_js_yiyu)].className = "active";
          } else {
            const zz_js_yiyu = document.getElementById("yiyu");
            zz_js_yiyu.children[Number(this.form.zz_js_yiyu)].className = "active";
          }
          // 焦虑
          if (this.form.zz_js_jiaolv == null||this.form.zz_js_jiaolv=="-1") {
            this.form.zz_js_jiaolv = 0
            const zz_js_jiaolv = document.getElementById("jiaolv");
            zz_js_jiaolv.children[Number(this.form.zz_js_jiaolv)].className = "active";
          } else {
            const zz_js_jiaolv = document.getElementById("jiaolv");
            zz_js_jiaolv.children[Number(this.form.zz_js_jiaolv)].className = "active";
          }
          // 谵妄
          if (this.form.zz_js_zhanwang == null||this.form.zz_js_zhanwang=="-1") {
            this.form.zz_js_zhanwang = 0
            const zz_js_zhanwang = document.getElementById("zhanwang");
            zz_js_zhanwang.children[Number(this.form.zz_js_zhanwang)].className = "active";
          } else {
            const zz_js_zhanwang = document.getElementById("zhanwang");
            zz_js_zhanwang.children[Number(this.form.zz_js_zhanwang)].className = "active";
          }
          // 小便
          if (this.form.zz_shifoupaibian == null||this.form.zz_shifoupaibian==""||this.form.zz_shifoupaibian=="-1") {
            this.form.zz_shifoupaibian = 0
          }
          if (this.form.zz_shifouganzao == null||this.form.zz_shifouganzao==""||this.form.zz_shifouganzao=="-1") {
            this.form.zz_shifouganzao = 0
          }  if (this.form.zz_shifoufuxie == null||this.form.zz_shifoufuxie==""||this.form.zz_shifoufuxie=="-1") {
            this.form.zz_shifoufuxie = 0
          }
          // 咳血
          if (this.form.zz_kexue == null||this.form.zz_kexue==""||this.form.zz_kexue=="-1") {
            this.form.zz_kexue = "0"
          } if (this.form.zz_xh_ouxue == null||this.form.zz_xh_ouxue==""||this.form.zz_xh_ouxue=="-1") {
            this.form.zz_xh_ouxue = "0"
          }
          // if (this.form.zz_shuimianshichang == null) {
          //   this.form.zz_shuimianshichang = "小于5小时"
          // }
          //胸闷次数
          if (this.form.zz_xiongmencishu == null||this.form.zz_xiongmencishu=="-1") {
            this.form.zz_xiongmencishu = 0
            const zz_xiongmencishu = document.getElementById("xiongmen");
            zz_xiongmencishu.children[Number(this.form.zz_xiongmencishu)].className = "active";
          } else {
            const zz_xiongmencishu = document.getElementById("xiongmen");
            zz_xiongmencishu.children[Number(this.form.zz_xiongmencishu)].className = "active";
          }

          // 心慌
          // 是否心慌
          if (this.form.zz_shifouxinhuang == null||this.form.zz_shifouxinhuang=="-1") {
            this.form.zz_shifouxinhuang = 0
            const xinhuang = document.getElementById("xinhuang");
            xinhuang.children[Number(this.form.zz_shifouxinhuang)].className = "active";
          } else {
            const xinhuang = document.getElementById("xinhuang");
            xinhuang.children[Number(this.form.zz_shifouxinhuang)].className = "active";
          }
          // if (this.form.zz_shifouxinhuang !== null) {
          //   if (this.form.zz_shifouxinhuang == '1') {
          //     const xinhuang = document.getElementById("xinhuang");
          //     xinhuang.children[0].className = "active";
          //   } else if (this.form.zz_shifouxinhuang == '0') {
          //     const xinhuang = document.getElementById("xinhuang");
          //     xinhuang.children[1].className = "active";
          //   }
          // }
          if (this.form.zz_shuimianshichang !== null) {
            if (this.form.zz_shuimianshichang == '小于5小时') {
              const shuimian = document.getElementById("smian");
              shuimian.children[0].className = "active";
            } else if (this.form.zz_shuimianshichang == '5—8小时') {
              const shuimian = document.getElementById("smian");
              shuimian.children[1].className = "active";
            }else if (this.form.zz_shuimianshichang == '大于8小时') {
              const shuimian = document.getElementById("smian");
              shuimian.children[2].className = "active";
            }
          }else {
            this.form.zz_shuimianshichang = '小于5小时'
            const shuimian = document.getElementById("smian");
            shuimian.children[0].className = "active";
          }

          if (this.form.zz_xiaobian !== null) {
            if (this.form.zz_xiaobian == '<100ml 无尿') {
              const xbian = document.getElementById("xbian");
              xbian.children[0].className = "active";
            } else if (this.form.zz_xiaobian == '≤400ml 少尿') {
              const xbian = document.getElementById("xbian");
              xbian.children[1].className = "active";
            }else if (this.form.zz_xiaobian == '1000-2000ml 正常') {
              const xbian = document.getElementById("xbian");
              xbian.children[2].className = "active";
            }else if (this.form.zz_xiaobian == '>2000ml 多尿') {
              const xbian = document.getElementById("xbian");
              xbian.children[3].className = "active";
            }
          }else {
            this.form.zz_xiaobian = '<100ml 无尿'
            const xbian = document.getElementById("xbian");
            xbian.children[0].className = "active";
          }
          // 疼痛
          if (this.form.zz_tengtongdengji == null||this.form.zz_tengtongdengji=="-1") {
            this.form.zz_tengtongdengji = 0
            const zz_tengtongdengji = document.getElementById("tengtong");
            zz_tengtongdengji.children[Number(this.form.zz_tengtongdengji)].className = "active";
          } else {
            const zz_tengtongdengji = document.getElementById("tengtong");
            zz_tengtongdengji.children[Number(this.form.zz_tengtongdengji)].className = "active";
          }
          // 发热
          if (this.form.zz_fare == null||this.form.zz_fare=="-1") {
            this.form.zz_fare = 0
            const zz_fare = document.getElementById("fare");
            zz_fare.children[Number(this.form.zz_fare)].className = "active";
          } else {
            const zz_fare = document.getElementById("fare");
            zz_fare.children[Number(this.form.zz_fare)].className = "active";
          }
          // 水肿
          if (this.form.zz_shuizhong == null||this.form.zz_shuizhong=="-1") {
            this.form.zz_shuizhong = 0
            const zz_shuizhong = document.getElementById("shuizhong");
            zz_shuizhong.children[Number(this.form.zz_shuizhong)].className = "active";
          } else {
            const zz_shuizhong = document.getElementById("shuizhong");
            zz_shuizhong.children[Number(this.form.zz_shuizhong)].className = "active";
          }
          // 咳嗽
          if (this.form.zz_kesou == null||this.form.zz_kesou=="-1") {
            this.form.zz_kesou = 0
            const zz_kesou = document.getElementById("kesouketan");
            zz_kesou.children[Number(this.form.zz_kesou)].className = "active";
          } else {
            const zz_kesou = document.getElementById("kesouketan");
            zz_kesou.children[Number(this.form.zz_kesou)].className = "active";
          }
          // 腹胀
          if (this.form.zz_xh_fuzhang == null||this.form.zz_xh_fuzhang=="-1") {
            this.form.zz_xh_fuzhang = 0
            const zz_xh_fuzhang = document.getElementById("fuzhang");
            zz_xh_fuzhang.children[Number(this.form.zz_xh_fuzhang)].className = "active";
          } else {
            const zz_xh_fuzhang = document.getElementById("fuzhang");
            zz_xh_fuzhang.children[Number(this.form.zz_xh_fuzhang)].className = "active";
          }
          // 腹泻
          if (this.form.zz_xh_fuxie == null||this.form.zz_xh_fuxie=="-1") {
            this.form.zz_xh_fuxie = 0
            const zz_xh_fuxie = document.getElementById("fuxie");
            zz_xh_fuxie.children[Number(this.form.zz_xh_fuxie)].className = "active";
          } else {
            const zz_xh_fuxie = document.getElementById("fuxie");
            zz_xh_fuxie.children[Number(this.form.zz_xh_fuxie)].className = "active";
          }
          // 便秘
          if (this.form.zz_xh_bianmi == null||this.form.zz_xh_bianmi=="-1") {
            this.form.zz_xh_bianmi = 0
            const zz_xh_bianmi = document.getElementById("bianmi");
            zz_xh_bianmi.children[Number(this.form.zz_xh_bianmi)].className = "active";
          } else {
            const zz_xh_bianmi = document.getElementById("bianmi");
            zz_xh_bianmi.children[Number(this.form.zz_xh_bianmi)].className = "active";
          }
          // 图片
          if (this.form.zz_img == null) {
            this.form.zz_img = []
          }

        })
        .catch(err => {
          if (err.msg) {
            this.$toast(err.msg);
          } else {
            this.$toast('网络错误');
          }
        });
    },
    //  删除图片
    deleteImg(detail, $event) {
      this.fileList1.forEach((item, index) => {
        if ($event.index == index) {
          this.fileList1.splice(index, 1)
          this.form.zz_img.splice(index, 1)
        }
      })
    },
    //  步进器
    upStep() {
      this.active--
    },
    DownStep() {
      this.form.action = "add";
      // 复康日志版本
      this.form.yemian = apiConfig.journal
      // this.form.zz_shifouxiongmen = this.form.zz_shifouxiongmen ? 1 : 0;
      // this.form.zz_shifouxinhuang = this.form.zz_shifouxinhuang ? 1 : 0;
      // this.form.zz_shifououtu = this.form.zz_shifououtu ? 1 : 0;
      // this.form.zz_shifoufuzhang = this.form.zz_shifoufuzhang ? 1 : 0;
      // this.form.zz_shifouexin = this.form.zz_shifouexin ? 1 : 0;
      // this.form.zz_shifoutengtong = this.form.zz_shifoutengtong ? 1 : 0;
      addHealthLog(this.form)
        .then(res => {
          // this.form.id = res.data.id;
          if(res.codes == 200){
            this.form.id = res.data.id;
            let expire = new Date(
            new Date().setDate(new Date().getDate() + 1)
            ).setHours(0, 0, 0, 0);
            this.localStorageSet("physical", this.form, expire);
            this.localStorageSet("id", res.data.id, expire);
            this.active++
          }
        })
        .catch(err => {
          if (err.msg) {
            this.$toast(err.msg);
          } else {
            // this.$toast('网络错误');
          }
        });
    },
  },
  mounted() {
    this.form.hzid = this.$route.params.hzid
    let id = this.localStorageGet("id");
    if (id) {
      this.form.id = id;
    }
    this.phylist()
  },

  computed: {
    pokerHistory() {
      return this.form.zz_xh_ouxue
    }
  },
  watch: {
    pokerHistory(newValue, oldValue) {
      if (newValue == 1) {
        this.$toast("请立刻就医!!!")
      }
    }
  }
};
</script>

<style lang="less">
#Physical {
  text-align: left;
  select {
    float: right;
  }
  .fliu{
    div {
      width: 100px;
    }
    .info{
      width: 140px;
      text-align: left;
      margin-top: 10px;
      font-size: 9px;
    }
  }
  .main {
    margin: 10px;
    border: none;
    .fanliu {
      align-items: flex-start;
      text-align: center;
      border:none
    }

    .header {
      padding: 23px 15px;
      background-color: #fff;
      border-radius: 6px;

      .shuimian {
        margin-top: 10px;

        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }

        .main {
            border:none;
           #smian{
            #shuimian{
              margin-top: 10px;
              display: inline-block;
              width: fit-content;
              height: 22px;
              line-height: 22px;
              padding: 0 10px;
              text-align: center;
              border: 1px solid rgba(0, 0, 0, 1);
              margin-right: 12px;
              border-radius: 5px;
            }
          }
          .title {
            font-size: 15px;
          }

          .van-cell {
            vertical-align: middle;
            //display: inline-block;
            padding: 0;
          }
        }
      } 
      .fl{
        border:none
      }
      .xinqing,
      .shiyu, .fl, .sz {
        // padding-bottom: 5px;
        border-bottom: 1px solid #d2d2d2;

        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }

        #shiyu,
        #xinqing, #fali, #shuizhong {
          margin: 15px 10px;
          // margin-left: 3px;
          #dengji, #fl, #sz {
            display: inline-block;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            // border: 1px solid rgba(0, 0, 0, 1);
            margin-right: 6px;
            border-radius: 5px;

            &:last-child {
              margin-right: 0;
              
            }
          }

        }

        .detail {
          margin: 10px 10px 10px;
          font-size: 10px;
          // text-align: right;
          .low {
            display: inline-block;
            // width: 78px;
            // height: 19px;
            text-align: left;
          }

          .nice {
            float: right;
          }
        }
      }

      .shiyu {
        margin-top: 10px;

        #shiyu {
          #dengji {
            &.active {
              background: rgba(110, 189, 183, 1);
            }
          }
        }
      }

      .xinqing {
        #xinqing {
          #dengji {
            &.active {
              background: rgba(245, 195, 92, 1);
            }
          }
        }
      }
      .shuimian {
        #smian {
          #shuimian {
            &.active {
              background: #5297ff;
            }
          }
        }
      }
      .xiaobian {
        #xbian {
          #xiaobian  {
            &.active {
              background: #5297ff;
            }
          }
        }
      }


    }

    .paibian {
      margin: 10px 0;
      padding: 23px 15px 0;
      background-color: #fff;
      border-radius: 6px;

      .pb {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-row {
          padding: 20px 0;
          border-bottom: 1px solid rgba(210, 210, 210, 1);

          &:last-child {
            border-bottom: 0;
          }

          .title {
            font-size: 15px;
          }
        }

        .title {
          //  font-size: 15px;
          .van-cell__title {
            color: #151515;
            font-size: 15px;
          }
        }

        .van-cell {
          padding: 0;
        }
      }
    }

    .zhengzhuang {
      // margin: 10px 0;
      padding: 23px 15px 0;
      background-color: #fff;
      border-radius: 6px;
      margin-bottom: 10px;

      .zz {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        .info {
          vertical-align: bottom;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-row {
          padding: 20px 0;
          border-bottom: 1px solid rgba(210, 210, 210, 1);

          &:last-child {
            border-bottom: 0;
          }

          .van-radio-group--horizontal {
            justify-content: flex-end;
          }

          .title {
            font-size: 15px;
          }
        }

        .title {
          //  font-size: 15px;
          .van-cell__title {
            color: #151515;
            font-size: 15px;
          }
        }

        .van-cell {
          padding: 0;
        }
      }
    }

    .huxi {
      // margin: 10px 0;
      padding: 23px 15px 0;
      background-color: #fff;
      border-radius: 6px;
      margin-bottom: 10px;

      .hx {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        .info {
          vertical-align: bottom;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-row {
          padding: 20px 0;
          border-bottom: 1px solid rgba(210, 210, 210, 1);

          &:last-child {
            border-bottom: 0;
          }

          .van-radio-group--horizontal {
            justify-content: flex-end;
          }

          .title {
            font-size: 15px;
          }
        }

        .title {
          //  font-size: 15px;
          .van-cell__title {
            color: #151515;
            font-size: 15px;
          }
        }

        .van-cell {
          padding: 0;
        }
      }
    }

    .kougan {
      // margin: 10px 0;
      padding: 23px 15px 0;
      background-color: #fff;
      border-radius: 6px;
      margin-bottom: 10px;

      .kg {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        .info {
          vertical-align: bottom;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-row {
          padding: 20px 0;
          border-bottom: 1px solid rgba(210, 210, 210, 1);

          &:last-child {
            border-bottom: 0;
          }

          .van-radio-group--horizontal {
            justify-content: flex-end;
          }

          .title {
            font-size: 15px;
          }
        }

        .title {
          //  font-size: 15px;
          .van-cell__title {
            color: #151515;
            font-size: 15px;
          }
        }

        .van-cell {
          padding: 0;
        }
      }
    }

    .xhxt {
      // margin: 10px 0;
      padding: 23px 15px 0;
      background-color: #fff;
      border-radius: 6px;
      margin-bottom: 10px;

      .xh {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        .info {
          vertical-align: bottom;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-row {
          padding: 20px 0;
          border-bottom: 1px solid rgba(210, 210, 210, 1);

          &:last-child {
            border-bottom: 0;
          }

          .van-radio-group--horizontal {
            justify-content: flex-end;
          }

          .title {
            font-size: 15px;
          }
        }

        .title {
          //  font-size: 15px;
          .van-cell__title {
            color: #151515;
            font-size: 15px;
          }
        }

        .van-cell {
          padding: 0;
        }
      }
    }
    .xiaobian{
      //border-bottom: 1px solid #d2d2d2;
      margin-top: 10px;
      .title {
        font-size: 17px;
        vertical-align: middle;
      }

      #xbian{
        margin: 15px 10px;
        text-align: left;
        //display: -webkit-box;
        //display: -webkit-flex;
        //display: flex;
        //-webkit-box-align: center;
        //-webkit-align-items: center;
        //align-items: center;
        #xiaobian{
          display: inline-block;
          width: fit-content;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border: 1px solid rgba(0, 0, 0, 1);
          margin-right: 6px;
          margin-bottom: 10px;
          border-radius: 5px;
          padding: 0 10px;
           &.active {
              background: #5297ff;
            }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .xinqing,
    .shiyu, .fl, .hxkn, .kg, .ex, .ys, .jl, .yy, .zw {
      // padding-bottom: 5px;
      border-bottom: 1px solid #d2d2d2;

      .title {
        font-size: 17px;
        vertical-align: middle;
      }

      img {
        width: 21px;
        height: 21px;
        margin-right: 13px;
        vertical-align: middle;
      }

      #shiyu,
      #xinqing, #fali, #huxi, #kougan, #exin, #yanshi, #jiaolv, #yiyu, #zhanwang, #shuizhong, #fare, #tengtong, #xinhuang, #xiongmen {
        //margin: 15px 10px;
        margin: 15px 10px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        // -webkit-box-pack: justify;
        // -webkit-justify-content: space-between;
        // justify-content: space-between;
        // margin-left: 3px;
        #dengji, #fl, #hxkn, #kg, #ex, #ys, #jl, #yy, #zw, #sz, #fr, #teto, #xh, #xm {
          display: inline-block;
          line-height: 22px;
          // text-align: center;
          border: 1px solid rgba(0, 0, 0, 1);
          margin-right: 6px;
          border-radius: 5px;
          &:last-child {
            margin-right: 0;
          }
        }
        .tit{
          align-items: left;
        }
      }

      .detail {
        margin: 10px 10px 10px;
        font-size: 10px;
        // text-align: right;
        .low {
          display: inline-block;
          // width: 78px;
          // height: 19px;
          text-align: left;
        }

        .nice {
          float: right;
        }
      }
    }

    .sz, .fr, .teto, .xh, .xm, .kskt, .fz, .fx, .bm {
      // padding-bottom: 5px;
      border-bottom: 1px solid #d2d2d2;
      .detail{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .title {
        font-size: 17px;
        vertical-align: middle;
      }

      img {
        width: 21px;
        height: 21px;
        margin-right: 13px;
        vertical-align: middle;
      }

      #shuizhong, #fare, #tengtong, #xinhuang, #xiongmen, #kesouketan, #fuzhang, #fuxie, #bianmi {
        margin: 15px 10px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        // -webkit-box-pack: justify;
        // -webkit-justify-content: space-between;
        // justify-content: space-between;
        // margin-left: 3px;
        #sz, #fr, #teto, #xh, #xm, #kskt, #fz, #fx, #bm {
          display: inline-block;
          width: 22px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border: 1px solid rgba(0, 0, 0, 1);
          margin-right: 6px;
          border-radius: 5px;

          &:last-child {
            margin-right: 0;
          }
        }

      }

      .detail {
        margin: 10px 10px 10px;
        font-size: 10px;
        // text-align: right;
        .low {
          display: inline-block;
          // width: 78px;
          // height: 19px;
          text-align: left;
        }

        .nice {
          float: right;
        }
      }
    }

    .shiyu {
      margin-top: 10px;

      #shiyu {
        #dengji {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .xinqing {
      #xinqing {
        #dengji {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .fl, .sz, .fr, .teto, .xh, .xm, .kskt, .fz, .fx, .bm {
      margin: 10px 0;
      //border-bottom: 0;
      padding-bottom: 5px;

      #fali, #shuizhong, #fare, #tengtong, #xinhuang, #xiongmen, #kesouketan, #fuzhang, #fuxie, #bianmi {
        #fl, #sz, #fr, #teto, #xh, #xm, #kskt, #fz, #fx, #bm {
          width: 22px;
          height: 22px;
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .hxkn {
      margin: 10px 0;

      #huxi {
        #hxkn {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .kg {
      margin: 10px 0;

      #kougan {
        #kg {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .ex {
      margin: 10px 0;

      #exin {
        #ex {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .ys {
      margin: 10px 0;

      #yanshi {
        #ys {
          &.active {
            background: #5297ff;
            color: #fff;
          }
        }
      }
    }

    .jl {
      margin: 10px 0;

      #jiaolv {
        #jl {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .yy {
      margin: 10px 0;

      #yiyu {
        #yy {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .zw {
      margin: 10px 0;
      border-bottom: 0;
      padding-bottom: 10px;

      #zhanwang {
        #zw {
          &.active {
            background: #5297ff;
          }
        }
      }
    }

    .qita {
      margin-top: 10px;
      padding: 23px 15px 0;
      background-color: #fff;
      border-radius: 6px;

      .qt {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        img {
          width: 21px;
          height: 21px;
          vertical-align: middle;
        }

        .van-uploader {
          width: 85%;
          margin: 0 auto;

          .van-uploader__preview {
            margin: 5px 6px;
          }
        }

        .mian {
          img {
            width: 80px;
            height: 80px;
            vertical-align: middle;
          }

          .van-uploader__input-wrapper {
            width: 100%;
            position: relative;
          }
        }
      }

      .mian {
        margin-top: 17px;

        .van-cell {
          padding: 0;

          .van-field__control {
            padding: 5px 10px 0;
            border-radius: 6px;
            background: rgba(245, 245, 245, 1);
          }
        }
      }

      .meiti {
        .van-uploader__preview-image {
          width: fit-content;
          height: fit-content;
        }

        padding-bottom: 10px;
        margin: 10px 0;
        text-align: center;

        .van-button {
          width: 110px;
          height: 25px;
        }

        .yuyin {
          margin-right: 20px;

          .van-button {
            background-color: #959595;
            border: 1px solid #959595;
          }
        }
      }
    }

    .fz14 {
      width: 100%;
      font-size: 14px;
      margin: 10px 0;
      padding-bottom: 10px;
      display: inline-block;
      border-bottom: 1px solid #ddd;
    }
  }

  .submit {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    text-align: center;
    padding-bottom: 20px;

    .van-button {
      //width: 281px;
      height: 37px;
      //background: rgba(78, 138, 244, 1);
      border-radius: 19px;
    }

    .van-button-info {
      background: rgba(78, 138, 244, 1);
    }
  }

  // 调整步骤条
  .van-steps {
    width: 87.6%;
    margin: 0 auto;
    padding-top: 20px;
    background: rgba(0, 0, 0, 0);
    // 调整位置
    .van-steps__items {
      padding: 22px 0 0 0;
    }

    .van-step__title {
      color: #5297FF;

      .percentage {
        width: 35px;
        height: 15px;
        position: absolute;
        top: -35px;
        left: -12.5px;
      }
    }

    .van-step__circle-container {
      // width: 87%;
      top: -10px;
      padding-left: 8px;
      background: rgba(0, 0, 0, 0);

      .van-step__icon--active, .van-step__title--active {
        color: #5297FF;
      }
    }

    .van-step__line {
      width: 60%;
      top: -10px;
      left: 26%;
      height: 0;
      border-bottom: 1px dashed #5297FF;
    }

    .van-step--process {
      .van-step__line {
        border: 1px solid #5297FF;
      }
    }

    .van-step--finish .van-step__line {
      width: 100%;
      left: 0;
      background: rgba(0, 0, 0, 0);
      border: 1px solid #5297FF;
    }

    .van-step__circle {
      width: 12px;
      height: 12px;
      background-color: rgba(0, 0, 0, 0);
      border: 1px dashed #5297FF
    }

    .van-step__circle:last-child {
      width: 12px;
      height: 12px;
      background-color: rgba(0, 0, 0, 0);
      border: 1px dashed #5297FF
    }

    .van-step__icon--active, .van-step--finish .van-step__circle {
      width: 12px;
      background: #5297FF;
      border-radius: 50%;
    }

    .van-step--horizontal .van-step__circle-container {
      left: -11px;
    }
  }

  // .van-hairline:first-child{
  //   .van-step__title{
  //     margin-left: -10px;
  //   }
  // }
  .van-step--horizontal:nth-child(7) {
    .van-step__line {
      width: 46%;
      left: 26%;
    }
  }

  .van-step--horizontal:last-child {
    .van-step__line {
      border: none
    }
  }

  .xh,.fl{
    border:none !important;
  }
  #yy, #zw{
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 1);
    margin-right: 6px;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  #fl{
    text-align: center;
  }
  // 修改样式
  #jl,#kg,#ex,#hxkn{
    width: 22px;
    text-align: center;
  }
  .van-radio{
    font-size: 16px;
  }
}

#Physical > .main {
  width: 95%;
  min-height: 70vh;
  border: none;
  .tit{
    align-items: flex-start;
  }
}
</style>
